import React, { Component } from 'react'
import { Flex, Button } from 'react-vant'

/*
tap切换组件 动态数据 
参数:
data:数组{tit,icon}
dataIndex：高亮 number 0...3
setIndex:修改dataIndex方法
*/
export default class Mytap extends Component {
    render() {

        let { data, dataIndex } = this.props

        return (
            <div>
                <Flex gutter={16} wrap='wrap'>
                    {
                        data.map((item,index) => {
                            return <Flex.Item span={6} key={index}>
                                <Button
                                    type={dataIndex===index?'primary':'default'}
                                    icon={item.icon}
                                    size='small'
                                    block round onClick={()=>{
                                        this.props.setIndex(index)
                                    }}>
                                    {item.tit}</Button>
                            </Flex.Item>
                        })
                    }
                </Flex>
            </div>
        )
    }
}
